<template>
  <div id="app">
     <div class="todo-container">
    <div class="todo-wrap">
      
      <Header :addTodo="addTodo"></Header>
    <List :todoList="todoList" :changeOneTodo="changeOneTodo" :deleteOneTodo="deleteOneTodo"></List>
    <Footer :todoList="todoList" :changeAllTodo="changeAllTodo" :deleteAllCheckTodo="deleteAllCheckTodo"></Footer>

    </div>
  </div> 
</div>
</template>

<script>
import Header from "./components/Header"
import List from "./components/List"
import Footer from "./components/Footer"

export default {
  name: 'App',
  components: {
    Header,
    List,
    Footer
  },
  data(){
    return {
     /*  todoList:[
        {id:1,content:"我",isOver:false},
        {id:2,content:"你",isOver:false},
        {id:3,content:"它",isOver:true}
      ] */
  todoList: JSON.parse(localStorage.getItem('todo_key')) || []
    }
  },
  wacth:{
    todoList:{
      deep:true,
    handler(newVal,oldVal){
      localStorage.setItem("todo_key",JSON.stringify(newVal))
    }
    }
  },
  methods:{
    // 添加todo的方法
    addTodo(todo){
      this.todoList.unshift(todo)
    },
    // 修改单个的todo完成状态
    changeOneTodo(todo){
      todo.isOver = !todo.isOver
    },
    // 修改多个todo完成状态（全选和全不选）
    changeAllTodo(value){
      this.todoList.forEach(item => item.isOver = value)
    },
    // 删除单个todo
    deleteOneTodo(index){
      this.todoList.splice(index,1)
    },
    // 删除多个选中的todo
    deleteAllCheckTodo(){
      this.todoList= this.todoList.filter(item => !item.isOver)
    }
  }
}
</script>

<style scoped>

/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
